<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态渐变卡片</title>
    <link rel="stylesheet" href="./03-动态渐变卡片.css">
</head>
<style>
	body {
	    height: 100vh;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    background-color: #e8e8e8;
	}
	
	.card-title {
	    color: #262626;
	    font-size: 1.5em;
	    line-height: normal;
	    font-weight: 700;
	    margin-bottom: 0.5em;
	}
	
	.small-desc {
	    font-size: 1em;
	    font-weight: 400;
	    line-height: 1.5em;
	    color: #452c2c;
	}
	
	.small-desc {
	    font-size: 1em;
	}
	
	.go-corner {
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    position: absolute;
	    width: 2em;
	    height: 2em;
	    overflow: hidden;
	    top: 0;
	    right: 0;
	    background: linear-gradient(135deg, #6293c8, #384c6c);
	    border-radius: 0 4px 0 32px;
	}
	
	.go-arrow {
	    margin-top: -4px;
	    margin-right: -4px;
	    color: white;
	    font-family: courier, sans;
	}
	
	.card {
	    display: block;
	    position: relative;
	    max-width: 300px;
	    max-height: 320px;
	    background-color: #f2f8f9;
	    border-radius: 10px;
	    padding: 2em 1.2em;
	    margin: 12px;
	    cursor: pointer; 
	    text-decoration: none;
	    z-index: 0;
	    overflow: hidden;
	    background: linear-gradient(to bottom, #c3e6ec, #a7d1d9);
	    font-family: Arial, Helvetica, sans-serif;
	}
	
	.card:before {
	    content: '';
	    position: absolute;
	    z-index: -1;
	    top: -16px;
	    right: -16px;
	    background: linear-gradient(135deg, #364a60, #384c6c);
	    height: 32px;
	    width: 32px;
	    border-radius: 32px;
	    transform: scale(1);
	    transform-origin: 50% 50%;
	    transition: transform 0.35s ease-out;
	}
	
	.card:hover:before {
	    transform: scale(28);
	}
	
	.card:hover .small-desc {
	    transition: all 0.5s ease-out;
	    color: rgba(255, 255, 255, 0.8);
	}
	
	.card:hover .card-title {
	    transition: all 0.5s ease-out;
	    color: #ffffff;
	}
</style>
<body>
    <div class="card">
        <p class="card-title">Product Name</p>
        <p class="small-desc">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat
            veritatis nobis saepe itaque rerum nostrum aliquid obcaecati odio
            officia deleniti. Expedita iste et illum, quaerat pariatur consequatur
            eum nihil itaque!
        </p>
        <div class="go-corner">
            <div class="go-arrow">→</div>
        </div>
    </div>
</body>

</html>